<template>
    <div class="content">
        <div class="chart-div" ref="barChartRef"></div>
    </div>
</template>

<script setup>
    import { ref, inject,onMounted} from 'vue';

    // 通过 inject 接收Echarts
    const Echarts = inject('$echarts');
    const barChartRef = ref();


    const getData=()=>{
        // echarts初始化
        const myChart = Echarts.init(barChartRef.value);
        const option = {
            // 1、图表 当鼠标悬浮的时候展示文字选项
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                valueFormatter: value => value ? (value.toFixed(2) + '%') : 0 // 鼠标悬浮展示文字格式化
            },
            // 2、图表 周围留白空间
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // 3、图表 X轴 选项
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            // 4、图表 y轴 选项，数值可交换：即柱形图横竖展示
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [{
                name: '已完成',
                type: 'bar',
                barWidth: '60%',
                // 此轴单独定义鼠标悬浮文字展示
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: value => ''
                },
                // 柱子样式
                itemStyle: {
//                    color: 'red',
                },
                // 描述文字
                label: {
                    show: true,
                    formatter: (params) => params[params.dataIndex]
                },
                // 描述文字样式
                textStyle: {
                    color: '#000'
                },
                // 文字位置
                position: 'right',
                data: [10, 52, 200, 334, 390, 330, 220],
            }]
        };
        option && myChart.setOption(option);
        // 根据页面大小自动响应图表大小
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    };


    onMounted(() => {
        getData();
    })





</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
    }
    .chart-div{
        width: 100%;
        height: 300px;
    }
</style>